import React from 'react'
import { useDispatch } from 'react-redux'
import './Item.css'
import slice from '../../redux/slice'
const { updateTodo, delTodo } = slice.actions
export default function Item({ todo: { todoName, id, isDone } }) {
  const dispatch = useDispatch()
  return (
    <li>
      <label>
        <input
          type="checkbox"
          checked={isDone}
          onChange={() => {
            dispatch(updateTodo(id))
          }}
        />
        <span className={isDone ? 'done' : ''}>{todoName}</span>
      </label>
      <button
        className="btn btn-danger"
        onClick={() => {
          dispatch(delTodo(id))
        }}
      >
        删除
      </button>
    </li>
  )
}
